<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" >

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>浏览用户信息</legend>
</fieldset>









<div style="margin-top: 20px;height: 1000px;border-top: 1px solid gainsboro;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>

    </script>
</div>

<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['table','form'], function(){
        var table = layui.table , $ = layui.jquery, form=layui.form;

        var tableIns =table.render({
            elem: '#test'
            ,url: '../../user?op=finds'
            ,title:'用户数据表'
            ,cols: [[
              /*  u_id,u_name,u_phone,balance,reg_time*/
                {type:'checkbox' }
                ,{field:'uId', width:120, title: 'ID', sort: true, unresize:true}
                ,{field:'uName', width:100, title: '用户名',width:120,edit: 'text'}

                ,{field:'uPhone', title:'手机号', width:200,  edit: 'text', templet: function(res){

                        return '<em>'+ res.uPhone +'</em>'
                    }}

                ,{field:'balance', title: '余额', width: 100,edit: 'text',sort: true}
                ,{field:'regTime', title: '注册时间', width: 300,edit: 'text',sort: true}


                , {field: 'right', title:'操作', toolbar: '#barDemo', width:150}


            ]]
            ,page: {
                limits:[2,3,4,10],
                limit:2,
                groups:5,
                first:'首页',
                last:'尾页'

            }
        });

        //监听行工具事件
        table.on('tool(test)',function (obj) {

            var data = obj.data;
            if(obj.event == 'del'){

                //发送请求到后端,修改状态
                let uId = data.uId;
                $.get("../../user?op=delete",{uId:uId},function (rs) {
                    if(rs> 0){
                        alert("删除成功！");
                        tableIns.reload();//修改成功后，需要重新加载表格中数据
                    }
                    else{
                        alert("删除失败！");
                    }



                },'json');

            }

        });






    });
</script>
</body>
</html>
